<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="buttons">
      <button class="buttonClass">Click me</button>
      <button class="buttonClass">Click me</button>
      <button class="buttonClass">Click me</button>
      <button class="buttonClass">Click me</button>
      <button class="buttonClass">Click me</button>
      <button class="buttonClass">Click me</button>
      <button class="buttonClass">Click me</button>
      <button class="buttonClass">Click me</button>
      <button class="buttonClass">Click me</button>
      <button class="buttonClass">Click me</button>
    </div>
    <script>

      for (let index = 0; index < 10000; index++) {
            let btn = document.createElement("button")
            btn.className='buttonClass'
            btn.innerText="Click me"
            document.querySelector('#buttons').appendChild(btn)
      }
        const buttons = document.getElementsByClassName("buttonClass");
        for (const button of buttons) {
          button.addEventListener("click", () => console.log("Clicked!"));
        }

      // document.getElementById("buttons").addEventListener("click", (event) => {
      //   // Step 2
      //   if (event.target.className === "buttonClass") {
      //     // Step 3
      //     console.log("Click!");
      //   }
      // });

      // addEventListener 方法的第三个参数 captureOrOptions： {capture：false}
      /*
如果缺少 captureOrOptions 参数，或者参数为 false 或 {capture：false}，那么侦听器将捕获目标（target）和 冒泡阶段（bubble phases）的事件
如果参数是 true 或 {capture：true}，那么侦听器将会侦听捕获阶段（capture phase）的事件。
*/

      document.body.addEventListener(
        "click",
        () => {
          console.log("Body click event in capture phase");
        },
        false
      );
    </script>
  </body>
</html>
